<template>
  <div class="home">

    <!-- 标题及搜索框 -->
    <div class="topBox">
      <div class="title">饿了吗</div>
      <div class="search">
        <input type="text" placeholder="请输入商家、商品名称">
      </div>
    </div>

    <!-- <van-button type="primary" @click="$router.push('/detail')">跳详情页</van-button> -->

    <!-- 轮播图组件 -->
    <van-swipe class="my-swipe" :autoplay="1000" >
      <van-swipe-item v-for="(item,index) in swiperlist" :key="index">
        <img :src="item.pic" alt="">
      </van-swipe-item>
    </van-swipe>

    <!-- 猜你喜欢 -->
    <div class="shopLike">
      <div class="titleLike">猜你喜欢</div>
      <div class="selector">
        <span>综合排序</span>
        <span>距离最近</span>
        <span>销量最高</span>
        <span>筛选</span>
      </div>
      <div class="activity">
        <span>年货热卖</span>
        <span>津贴联盟</span>
        <span>满减优惠</span>
        <span>品质联盟</span>
      </div>

    </div>


  </div>  
</template>

<script>
export default {
  data(){
    return {
      swiperlist:[
        {
          pic:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F45bae90003a020b9ae5d58ce5a0145dab62bf52119513-vkgwQn_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668758197&t=adc416473df8b18f85a7218b4e983ac1"
        },
        {
          pic:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F45bae90003a020b9ae5d58ce5a0145dab62bf52119513-vkgwQn_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668758197&t=adc416473df8b18f85a7218b4e983ac1"
        },
        {
          pic:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F45bae90003a020b9ae5d58ce5a0145dab62bf52119513-vkgwQn_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668758197&t=adc416473df8b18f85a7218b4e983ac1"
        },
      ]
    }
  }
}
</script>

<style scoped>
 .home{
    /* height: 300px; */
    background-color: lightcoral;
  }

  .topBox {
    width: 100%;
    height: 100px;
    background-color: lightskyblue;
    overflow: hidden;
    margin-bottom: 15px;
  }
  .topBox .title {
    color: white;
    font-size: 24px;
    margin: 10px;
  }
  .topBox .search {
    width: 95%;
    margin:  0 auto;
  }
  .search input {
    width: 100%;
    height: 40px;
    border: none;
    outline: none;
    border-radius: 20px;
    text-align: center;
  }
 
  .my-swipe {
    width: 95%;
    margin: 0 auto;
  }
  .my-swipe img{
    width: 100%;
    text-align: center;
    border-radius: 10px;
  }

  .shopLike {
    width: 100%;
    background-color: yellow;
  }
  .shopLike .titleLike {
    color: black;
    font-size: 20px;
    font-weight: bolder;
    padding-left: 10px;
  }
  .shopLike .selector {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 15px;
    margin-top: 15px;
    /* background-color: green; */
  }
  .selector span {
    display: inline-block;
    width: 20%;
    text-align: center;
    background-color: rgb(240, 235, 235);
  }
  .selector span:nth-child(1) {
    margin-left: 5px;
  }
  .selector span:nth-child(2) {
    margin-left: 22px;
  }
   .selector span:nth-child(3) {
    margin-left: 22px;
  }
   .selector span:nth-child(4) {
    margin-left: 22px;
  }
  .shopLike .activity {
    width: 100%;
    margin: 0 auto;
  }
  .activity span {
    display: inline-block;
    width: 20%;
    text-align: center;
    background-color: rgb(240, 235, 235);
  }
  .activity span:nth-child(1) {
    margin-left: 5px;
  }
  .activity span:nth-child(2) {
    margin-left: 22px;
  }
  .activity span:nth-child(3) {
    margin-left: 22px;
  }
  .activity span:nth-child(4) {
    margin-left: 22px;
  }
 
</style>